<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Bidi BTD in Select</title>

		<!-- required: the default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>

		<style>
			@import url(../../../themes/claro/document.css);
			@import url(../../css/dijitTests.css);
		</style>

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../../dojo/dojo.js"
			data-dojo-config="isDebug: true, has: { 'dojo-bidi': true }"></script>

		<!-- only needed for alternate theme testing: -->
		<script type="text/javascript" src="../../_testCommon.js"></script>

		<script type="text/javascript">
			require([
				"doh/runner",
				"dojo/parser",
				"dijit/registry",
				"dijit/form/Select",
				"dijit/form/Button",
				"dijit/form/Form",
				"dijit/Dialog",
				"dojo/domReady!"
			], function(doh, parser, registry, Select){
	
				var numOptions = 0;
				var numChanges = 0;
				var addNum = 10;
	
				function testSelectWidget(element, formDir,elementTextDir,isfirstChildLatin){
					doh.is(registry.byId(element).get("textDir"), elementTextDir);
					doh.is(registry.byId(element).dir, formDir);
					var t_dir = elementTextDir;
					if(t_dir == "auto")
						t_dir = isfirstChildLatin? "ltr" : "rtl";
					doh.is(registry.byId(element).containerNode.dir, t_dir);
				}
	
				function testDropdownList(elementName){
					var element = registry.byId(elementName);
					var elementTextDir = element.get("textDir");
					var itemTextDir = elementTextDir;
					element.loadDropDown(function(){});
					var list = element.dropDown.getChildren();
					dojo.forEach(list, function(entry){
						if(elementTextDir == "auto"){
							itemTextDir = element._checkContextual(entry.label.replace(/<[^>]*>/gm," "));
						}
						doh.is(itemTextDir,entry.textDirNode.dir);
					});
				}

				var programmatic1 = new Select({
					options: [
						{ label: 'foo!', value: 'foo!'},
						{ label: 'bar', value: 'bar' },
						{ label: 'x !', value: 'x !', selected: true  },
						{ label: '\u05D0\u05D1\u05D2!', value: '\u05D0\u05D1\u05D2!' }
					]
				});
				programmatic1.placeAt('testProgramatic1');
				programmatic1.set("textDir",'ltr');

				var programmatic2 = new Select({
					options: [
						{ label: 'foo!', value: 'foo!'},
						{ label: 'bar', value: 'bar' },
						{ label: 'x !', value: 'x !', selected: true  },
						{ label: '\u05D0\u05D1\u05D2!', value: '\u05D0\u05D1\u05D2!' }
					]
				});
				programmatic2.placeAt('testProgramatic2');
				programmatic2.set("textDir",'rtl');

				var programmatic3 = new Select({
					options: [
						{ label: 'foo!', value: 'foo!'},
						{ label: 'bar', value: 'bar' },
						{ label: 'x !', value: 'x !', selected: true  },
						{ label: '\u05D0\u05D1\u05D2!', value: '\u05D0\u05D1\u05D2!' }
					]
				});
				programmatic3.placeAt('testProgramatic3');
				programmatic3.set("textDir",'auto');

				doh.register("parse", function(){
					return parser.parse();
				});

				doh.register("dijit.tests._BidiSupport.form.Select in LTR form", [
					{name:"LTR form, Auto/Hebrew", runTest:function(){testSelectWidget("s10","ltr","auto",false);}},
					{name:"LTR form, Auto/English",runTest:function(){testSelectWidget("s11","ltr","auto",true);}},
					{name:"LTR form, LTR",runTest:function(){testSelectWidget("s12","ltr","ltr",true);}},
					{name:"LTR form, RTL",runTest:function(){testSelectWidget("s13","ltr","rtl",true);}}
				]);

				doh.register("Bidi dropdown list in Select, LTR form", [
					{name:"LTR form, Auto/Hebrew", runTest:function(){testDropdownList("s10");}},
					{name:"LTR form, Auto/English",runTest:function(){testDropdownList("s11");}},
					{name:"LTR form, LTR",runTest:function(){testDropdownList("s12");}},
					{name:"LTR form, RTL",runTest:function(){testDropdownList("s13");}}
				]);

				doh.register("dijit.tests._BidiSupport.form.Select in RTL form", [
					{name:"RTL form, Auto/Hebrew", runTest:function(){testSelectWidget("s10R","rtl","auto",false);}},
					{name:"RTL form, Auto/English",runTest:function(){testSelectWidget("s11R","rtl","auto",true);}},
					{name:"RTL form, LTR",runTest:function(){testSelectWidget("s12R","rtl","ltr",true);}},
					{name:"RTL form, RTL",runTest:function(){testSelectWidget("s13R","rtl","rtl",true);}}
				]);

				doh.register("Bidi dropdown list in Select, RTL form", [
					{name:"LTR form, Auto/Hebrew", runTest:function(){testDropdownList("s10R");}},
					{name:"LTR form, Auto/English",runTest:function(){testDropdownList("s11R");}},
					{name:"LTR form, LTR",runTest:function(){testDropdownList("s12R");}},
					{name:"LTR form, RTL",runTest:function(){testDropdownList("s13R");}}
				]);

				doh.register("dijit.tests._BidiSupport.form.Select, rich text (auto)", [
					{name:"Rich text Auto/English Select",runTest:function(){testSelectWidget("s4","ltr","auto",true);}},
					{name:"Rich text Auto/Hebrew Select", runTest:function(){testSelectWidget("s5","ltr","auto",false);}},
					{name:"Rich text Auto/English Dropdown",runTest:function(){testDropdownList("s4");}},
					{name:"Rich text Auto/Hebrew Dropdown", runTest:function(){testDropdownList("s5");}}

				]);

				doh.run();
			});
		</script>
	</head>
	<body class="claro">
		<h1 id="_title" class="testTitle">Test: dijit/form/Select <i>BIDI</i></h1>

		<form id="form" data-dojo-id="formL" data-dojo-type="dijit/form/Form" method="get"
				onSubmit="return this.validate();">
		<div dir="ltr">
			<h2>dijit/form/Select LTR form</h2>
			<h4 class="testSubtitle">Setting Defaults</h4>

			<label for="s10">Test AUTO: </label>
			<select id="s10" data-dojo-id="s10" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s10" , textDir:"auto", style:{width:"150px"}'>
				<option value="TN">START &#1495;&#1491;&#1513;!</option>
				<option value="TM" selected="selected">&#1495;&#1491;&#1513; END !</option>
				<option value="VA">Hello AUTO!!</option>
				<option value="WA">&#1495;&#1491;&#1513;.</option>
				<option value="FL">NEW!</option>
			</select>
			<select id="s11" data-dojo-id="s11" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s11" , textDir:"auto", style:{width:"150px"}'>
				<option value="TN">START &#1495;&#1491;&#1513;!</option>
				<option value="TM">&#1495;&#1491;&#1513; END !</option>
				<option value="VA" selected="selected">Hello AUTO!!</option>
				<option value="WA">&#1495;&#1491;&#1513;.</option>
				<option value="FL">NEW!</option>
			</select>
			<br>
			<label for="s12">Test LTR: </label>
			<select id="s12" data-dojo-id="s12" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s12" , textDir:"ltr", style:{width:"150px"}'>
				<option value="TN">START &#1495;&#1491;&#1513;!</option>
				<option value="TM">&#1495;&#1491;&#1513; END !</option>
				<option value="VA" selected="selected">Hello LTR!!</option>
				<option value="WA">&#1495;&#1491;&#1513;.</option>
				<option value="FL">NEW!</option>
			</select>

			<label for="s13">Test RTL: </label>
			<select id="s13" data-dojo-id="s13" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s13" , textDir:"rtl", style:{width:"150px"}'>
				<option value="TN">START &#1495;&#1491;&#1513;!</option>
				<option value="TM">&#1495;&#1491;&#1513; END !</option>
				<option value="VA" selected="selected">Hello RTL!!</option>
				<option value="WA">&#1495;&#1491;&#1513;.</option>
				<option value="FL">NEW!</option>
			</select>

			<hr>
			<h4 class="testSubtitle"> </h4>
			<label>Rich Text (AUTO):
			<span id="s4" data-dojo-id="s4" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s4", value:"AK" , textDir:"auto", style:{width:"150px"}'>
				<span data-dojo-value="AL"><b>Alabama.</b></span>
				<span data-dojo-value="AK"><span style="color:red;">A</span><span style="color:orange;">l</span><span style="color:yellow;">a</span><span style="color:green;">s</span><span style="color:blue;">k</span><span style="color:purple;">a.</span></span>
				<span data-dojo-value="AZ"><i>Arizona.</i></span>
				<span data-dojo-value="IL"><b><i>&#1495;&#1491;&#1513;.</i></b></span>
				<span data-dojo-value="AR"><span class="ark">Arkansas.</span></span>
				<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a.</span></span>
				<button value="NM" disabled="disabled">New<br>&nbsp;&nbsp;Mexico</button>
			</span></label>
			&nbsp;&nbsp;
			<label>
			<span id="s5" data-dojo-id="s5" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s5", value:"IL" , textDir:"auto", style:{width:"150px"}'>
				<span data-dojo-value="AL"><b>Alabama.</b></span>
				<span data-dojo-value="AK"><span style="color:red;">A</span><span style="color:orange;">l</span><span style="color:yellow;">a</span><span style="color:green;">s</span><span style="color:blue;">k</span><span style="color:purple;">a.</span></span>
				<span data-dojo-value="AZ"><i>Arizona.</i></span>
				<span data-dojo-value="IL"><b><i>&#1495;&#1491;&#1513;.</i></b></span>
				<span data-dojo-value="AR"><span class="ark">Arkansas.</span></span>
				<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a.</span></span>
				<button value="NM" disabled="disabled">New<br>&nbsp;&nbsp;Mexico</button>
			</span></label>


		</div>
		</form>

<!------------------------>
		<form id="formR" data-dojo-id="form" data-dojo-type="dijit/form/Form" method="get" >
		<div dir="rtl">
			<h2>dijit/form/Select RTL form</h2>
			<h4 class="testSubtitle">Setting Defaults</h4>

			<label for="s10R">Test AUTO: </label>
			<select id="s10R" data-dojo-id="s10R" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s10R" , textDir:"auto"'>
				<option value="TN">START &#1495;&#1491;&#1513;!</option>
				<option value="TM" selected="selected">&#1495;&#1491;&#1513; END !</option>
				<option value="VA">Hello AUTO!!</option>
				<option value="WA">&#1495;&#1491;&#1513;.</option>
				<option value="FL">NEW!</option>
			</select>
			<select id="s11R" data-dojo-id="s11" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s11R" , textDir:"auto"'>
				<option value="TN">START &#1495;&#1491;&#1513;!</option>
				<option value="TM">&#1495;&#1491;&#1513; END !</option>
				<option value="VA" selected="selected">Hello AUTO!!</option>
				<option value="WA">&#1495;&#1491;&#1513;.</option>
				<option value="FL">NEW!</option>
			</select>
			<br>
			<label for="s12R">Test LTR: </label>
			<select id="s12R" data-dojo-id="s12R" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s12R" , textDir:"ltr"'>
				<option value="TN">START &#1495;&#1491;&#1513;!</option>
				<option value="TM">&#1495;&#1491;&#1513; END !</option>
				<option value="VA" selected="selected">Hello LTR!!</option>
				<option value="WA">&#1495;&#1491;&#1513;.</option>
				<option value="FL">NEW!</option>
			</select>
			<br>
			<label for="s13R">Test RTL: </label>
			<select id="s13R" data-dojo-id="s13R" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s13R" , textDir:"rtl"'>
				<option value="TN">START &#1495;&#1491;&#1513;!</option>
				<option value="TM">&#1495;&#1491;&#1513; END !</option>
				<option value="VA" selected="selected">Hello RTL!!</option>
				<option value="WA">&#1495;&#1491;&#1513;.</option>
				<option value="FL">NEW!</option>
			</select>

			<hr>
			<h4 class="testSubtitle"> </h4>
			<label>Rich Text (AUTO):
			<span id="s4R" data-dojo-id="s4R" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s4R", value:"AK" , textDir:"auto"'>
				<span data-dojo-value="AL"><b>Alabama.</b></span>
				<span data-dojo-value="AK"><span style="color:red;">A</span><span style="color:orange;">l</span><span style="color:yellow;">a</span><span style="color:green;">s</span><span style="color:blue;">k</span><span style="color:purple;">a.</span></span>
				<span data-dojo-value="AZ"><i>Arizona.</i></span>
				<span data-dojo-value="IL"><b><i>&#1495;&#1491;&#1513;.</i></b></span>
				<span data-dojo-value="AR"><span class="ark">Arkansas.</span></span>
				<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a.</span></span>
				<button value="NM" disabled="disabled">New<br>&nbsp;&nbsp;Mexico</button>
			</span></label>
			&nbsp;&nbsp;
			<label>
			<span id="s5R" data-dojo-id="s5" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s5R", value:"IL" , textDir:"auto"'>
				<span data-dojo-value="AL"><b>Alabama.</b></span>
				<span data-dojo-value="AK"><span style="color:red;">A</span><span style="color:orange;">l</span><span style="color:yellow;">a</span><span style="color:green;">s</span><span style="color:blue;">k</span><span style="color:purple;">a.</span></span>
				<span data-dojo-value="AZ"><i>Arizona.</i></span>
				<span data-dojo-value="IL"><b><i>&#1495;&#1491;&#1513;.</i></b></span>
				<span data-dojo-value="AR"><span class="ark">Arkansas.</span></span>
				<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a.</span></span>
				<button value="NM" disabled="disabled">New<br>&nbsp;&nbsp;Mexico</button>
			</span></label>

		</div>
		</form>


<!------------------------>
		<hr>
		<h4 class="testSubtitle">Widgets created programmatically:</h4><br>
		<span id="testProgramatic1">LTR:&nbsp;</span>
		<span id="testProgramatic2">&nbsp;&nbsp;RTL:&nbsp;</span>
		<span id="testProgramatic3">&nbsp;&nbsp;AUTO:&nbsp;</span>

		<!-- testing that tooltip disappears when dialog is closed -->
		<div data-dojo-type="dijit/Dialog" id="dlg1">
			<div data-dojo-type="dijit/form/Select" id="dlg1Select"required="true"></div>
			<div data-dojo-type="dijit/form/Button" id="dlg1ValidateBtn">
				<script type=dojo/method data-dojo-event="onClick">
					var dlg1 = dijit.byId("dlg1");
					if(dlg1.validate()){
						dlg1.hide();
					}
				</script>
				validate and close
			</div>
		</div>

	</body>
</html>
